<template>
  <div class="xiaoxi">
    <!-- 标题 -->
    <div class="title">
      <h1>消息</h1>
    </div>
    <!-- 导航 -->
    <ul class="daohang">
      <router-link v-for="item in xiaoxiItems"
                   :key="item.path"
                   :to="item.path"
                   tag="li">
        <i class="iconfont daohanglist"
           v-html="item.meta.icon"></i>
        <span class="wenzi">{{item.meta.title}}</span>
      </router-link>
    </ul>
    <!-- 消息列表 -->
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
    >
      <van-card
          v-for="item in xiaoxiList"
          :key="item.id"
          @click='headnext'
    >
      <!-- 自定义标题插槽，显示一行标题文本 -->
        <template #title>
          <div class="van-ellipsis">{{ item.title }}</div>
        </template>
        <!-- 货物状态 -->
         <template #desc>
          <div class="van-desc">{{ item.news }}</div>
        </template>
      <!-- 头像 -->
      <template v-slot:thumb>
        <img src="@/assets/images/touxiang2.png" alt="">
      </template>
      <!-- 消息条数 -->
       <template v-slot:num>
          <!-- <span style="color: white;background: red;border-radius: 50%;width:60px;height:60px">
            <i style="font-size:18px;">{{ item.badge }}</i>
          </span> -->
          <span class="van-badge">{{ item.badge }}</span>
        </template>
        <!-- 价时间位置 -->
        <template v-slot:price>
            <span class="van-time">{{ item.time }}</span>
        </template>
      </van-card>
    </van-list>

  </div>
</template>
<script>
import routes from '@/router/routes'
import { getXiaoxi } from '@/api/xiaoxi'

export default {
  name: 'Xiaoxi',
  data() {
    return {
      xiaoxiList: [], // 消息列表数据
      list: [],
      loading: false,
      finished: false,
    }
  },
  async created() {
    const { list } = await getXiaoxi()
    // 把请求获取到的数据，存到消息列表中
    this.xiaoxiList = list
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }

        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    },
    headnext() {
      this.$router.push('/wuliu')
    },
  },
  computed: {
    // 待渲染的 tab 项数据
    xiaoxiItems() {
      return routes.filter(route => route.meta?.inxiaoxi) // 可选链   ??(空值合并)
    },
  },

}
</script>

<style lang="less">
.title {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 300px;
  background: #c1ab96;
  color: white;
}
h1 {
  margin-left: 60px;
}
.daohang {
  width: 650px;
  display: flex;
  border-top: 1px solid #eee;
  height: 180px;
  position: relative;
  top: -80px;
  left: 50px;
  background: #eee;
  border-radius: 30px;
  z-index: 99;
}
li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.daohanglist {
  font-size: 30px;
  position: absolute;
  left: 50px;
  top: 0px;
  text-align: center;
  line-height: 120px;
  width: 120px;
  height: 120px;
  // background: -webkit-linear-gradient(
  //   0deg,
  //   rgba(234, 205, 163, 1) 0%,
  //   rgba(234, 205, 163, 1) 0%,
  //   rgba(214, 174, 123, 1) 100%,
  //   rgba(214, 174, 123, 1) 100%
  // );
  border-radius: 60px;
  background: -webkit-linear-gradient(
    0deg,
    rgba(127, 127, 213, 1) 0%,
    rgba(127, 127, 213, 1) 0%,
    rgba(134, 168, 231, 1) 50%,
    rgba(45, 167, 228, 1) 100%,
    rgba(145, 234, 228, 1) 100%,
     rgba(145, 234, 228, 1) 100%);
}
.wenzi {
  position: absolute;
  top: 130px;
  left: 50px;
  font-weight: 700;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
}
.van-ellipsis {
  font-size: 20px;
  line-height: 40px;
  font-weight: 900;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  // color: #eee;
}
.van-desc{
  font-size: 18px;
  color: #868686;
}
.van-badge{
  border: 1px solid red;
  border-radius: 50%;
  // width: 30px;
  background: red;
  font-size: 22px;
  color: white;
}
.van-time{
  font-size: 16px;
  color: #868686;
}
.van-card__bottom{
  margin-top: 18px;
}
img {
  width: 100%;
}
</style>
